<!-- 
  新增通知单弹框
  用户通过订货单位和产品工号新建通知单记录
 -->
<template>
  <el-dialog width="400px" @close="close" :close-on-click-modal="false" :title="title" :visible.sync="visible" append-to-body class="addnotice">
    <el-form :model="formData" :rules="rules" ref="form" label-width="100px">
      <el-form-item label="订货单位" prop="orderUnit">
        <el-input id="iptB2OrderUnit" v-model="formData.orderUnit" placeholder="输入订货单位" class="w150"> </el-input>
      </el-form-item>
      <el-form-item label="产品工号" prop="workingNumber">
        <el-input id="iptB2WorkingNumber" v-model="formData.workingNumber" placeholder="输入产品工号" class="w150"> </el-input>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button id="btnB2Next" type="primary" @click="submitForm">新建</el-button>
      <el-button id="btnB2Cancel" @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

const vuexNotice = namespace('NewNotice')

/**
 * 产品工号格式验证：BL开头
 */
var validatePass = (rule, value, callback) => {
  if (value.startsWith('BL')) {
    callback()
  } else {
    callback(new Error('请填写格式为"BL+四位数字"'))
  }
}

@Component({
  components: {}
})
export default class CreateNotice extends Vue {
  public $refs!: {
    form: any
    insertDialog: any
    detail: any
  }

  // API：02_01_新建生产通知
  @vuexNotice.Action ADD_NOTICE: any

  // 组件可见性（显示/隐藏）
  visible: boolean = false

  // 组件标题
  title: string = '新建生产通知'

  // 表单数据
  formData: any = {
    orderUnit: '', //订货单位
    workingNumber: '' //产品工号
  }

  // 表单数据验证规则
  rules: any = {
    orderUnit: [{ required: true, message: '请填写订货单位', trigger: 'blur' }],
    workingNumber: [
      { required: true, message: '请填写产品工号', trigger: 'change' },
      { validator: validatePass, trigger: 'blur' },
      { min: 6, max: 6, message: '请填写格式为"BL+四位数字"', trigger: 'blur' }
    ]
  }

  open() {
    this.visible = true
  }

  close() {
    this.$refs.form.resetFields()
    this.visible = false
  }

  submitForm() {
    this.$refs.form.validate((valid: any) => {
      if (valid) {
        this.addNotice()
      }
    })
  }

  async addNotice() {
    let result = await this.ADD_NOTICE({ ...this.formData })
    if (result) {
      this.$router.push({
        name: 'detail',
        params: {
          typeNumber: '2',
          resultNoticeId: result.noticeId,
          resultNoticeNumber: result.noticeNumber,
          workingNumber: this.formData.workingNumber,
          orderUnit: this.formData.orderUnit,
          // formData: this.formData,
          showApproval: 'false',
          showReview: 'false',
          showBtn: 'true',
          canAddProduct:'false',
          showDao: 'true'
        }
      })
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.addnotice {
  margin-top: 60px;
  .el-form-item {
    margin-bottom: 22px !important;
  }
  .footer {
    border-top: 1px solid #eee;
    padding: 10px 20px;
    background: #fefefe;
    text-align: center;
  }
}
</style>
